<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>程序员聊天室</title>
    <link rel="stylesheet" href="https://vsapi.hamm.cn/css/element.css">
    <style>
        [v-cloak] {
            visibility: hidden !important;
        }

        html,
        body {
            margin: 0;
            padding: 0;
            background-color: #222;
            color: #fff;
        }

        * {
            font-family: 'Gotham-Book';
            background-attachment: fixed;
            outline: none;
            -webkit-text-size-adjust: none;
            -moz-text-size-adjust: none;
            -ms-text-size-adjust: none;
            text-size-adjust: none;
            -moz-user-select: none;
            /*火狐*/
            -webkit-user-select: none;
            /*webkit浏览器*/
            -ms-user-select: none;
            /*IE10*/
            -khtml-user-select: none;
            /*早期浏览器*/
            user-select: none;
        }

        ::-webkit-scrollbar {
            width: 5px;
            /*对垂直流动条有效*/
            height: 5px;
            /*对水平流动条有效*/
        }

        /*定义滚动条的轨道颜色、内阴影及圆角*/

        ::-webkit-scrollbar-track {
            /* background-color: rgba(50, 50, 50, 0.1); */
            background-color: transparent;
            border-radius: 5px;
        }

        /*定义滑块颜色、内阴影及圆角*/

        ::-webkit-scrollbar-thumb {
            border-radius: 5px;
            background-color: rgba(0, 0, 0, 0.2);
        }

        /*定义两端按钮的样式*/

        ::-webkit-scrollbar-button {
            background-color: transparent;
        }

        /*定义右下角汇合处的样式*/

        ::-webkit-scrollbar-corner {
            background: transparent;
        }

        .love {
            -webkit-animation: rotate 20s linear infinite;
            -moz-animation: rotate 20s linear infinite;
            -o-animation: rotate 20s linear infinite;
            animation: rotate 20s linear infinite;
        }

        .love_fast {
            -webkit-animation: rotate 5s linear infinite;
            -moz-animation: rotate 5s linear infinite;
            -o-animation: rotate 5s linear infinite;
            animation: rotate 5s linear infinite;
        }

        .main .message {
            position: absolute;
            left: 0;
            top: 0;
            bottom: 120px;
            right: 0;
            overflow: hidden;
            overflow-y: auto;
            padding: 10px;
        }

        .message .item {
            position: relative;
            text-align: left;
        }

        .main .isMe {
            text-align: right;
        }

        .main .item .user .head {
            width: 40px;
            height: 40px;
            position: absolute;
            left: 0;
            top: 0;
        }

        .message .isMe .user .head {
            position: absolute;
            right: 0;
            top: 0;
            left: auto;
        }

        .message .item .user .head img {
            width: 100%;
            height: 100%;
            border-radius: 10px;
        }

        .message .item .user .name {
            position: absolute;
            left: 50px;
            top: 0;
            text-align: left;
            color: #999;
            font-size: 14px;
        }

        .message .isMe .user .name {
            position: absolute;
            right: 50px;
            top: 0;
            text-align: right;
        }

        .message .item .text {
            margin: 0px 50px;
            padding-top: 30px;
            text-align: left;
        }

        .message .isMe .text {
            text-align: right;
        }

        .message .item .text .content {
            text-align: left;
            max-width: 50%;
            background-color: rgba(255, 255, 255, 0.03);
            display: inline-block;
            border-radius: 20px;
            padding: 8px 15px;
            color: #ccc;
            font-size: 13px;
            word-break: break-all;
            border-top-left-radius: 0px;
        }

        .message .isMe .text .content {
            text-align: left;
            border-top-left-radius: 20px;
            border-top-right-radius: 0px;
        }

        .message .item .img {
            margin: 0px 50px;
            padding-top: 30px;
        }

        .message .item .img .content {
            text-align: left;
            max-width: 200px;
            max-height: 200px;
            background-color: rgba(255, 255, 255, 0.03);
            display: inline-block;
            border-radius: 20px;
            padding: 5px;
            width: 100%;
            height: 100%;
            border-radius: 20px;
            border-top-left-radius: 0px;
        }

        .message .isMe .img .content {
            border-top-left-radius: 20px;
            border-top-right-radius: 0px;
        }

        .message .at .content {
            background-color: rgba(0, 255, 0, 0.1) !important;
            color: yellow !important;
        }

        .message .item .time {
            font-size: 12px;
            color: #444;
            margin: 0px 50px;
            margin-top: 5px;
            margin-bottom: 10px;
        }

        .main .form {
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            height: 100px;
            border-top: 1px solid #333;
        }

        .main .input {
            position: absolute;
            left: 10px;
            right: 10px;
            bottom: 10px;
            top: 10px;
        }

        .main .form .input textarea {
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            background-color: transparent;
            resize: none;
            outline: none;
            border: none;
            color: #ccc;
            font-size: 14px;
        }
    </style>
</head>

<body>
    <div id="app" v-cloak>
        <div class="main">
            <div class="message" id="bbbug_main_chat_history">
                <div class="item" v-for="(item,index) in messageList"
                    :class="(item.type=='text' || item.type=='img') && item.user.user_id == userInfo.user_id?'isMe':''">
                    <div class="user" v-if="item.type=='text' || item.type=='img'">
                        <div class="head"><img :src="getStaticUrl(item.user.user_head)" /></div>
                        <div class="name">{{urldecode(item.user.user_name)}}</div>
                    </div>
                    <div class="text" v-if="item.type=='text'">
                        <div class="content">{{urldecode(item.content)}}</div>
                    </div>
                    <div class="img" v-if="item.type=='img'">
                        <img class="content" :src="getStaticUrl(item.content)" />
                    </div>
                    <div class="time">{{friendlyTime(item.time)}}</div>
                </div>
            </div>
            <div class="form">
                <div class="input"><textarea placeholder="Wish you fuck your bugs...">{{roomInfo.room_name}}</textarea>
                </div>
            </div>
        </div>
        <div class="dialogs">

        </div>
    </div>

    <script src="https://vsapi.hamm.cn/js/vue-2.6.10.min.js"></script>
    <script src="https://vsapi.hamm.cn/js/axios.min.js"></script>
    <script src="https://vsapi.hamm.cn/js/element.js"></script>
    <script>
        const vscode = acquireVsCodeApi();
        new Vue({
            el: '#app',
            data() {
                return {
                    apiUrl: "https://api.bbbug.com/",
                    staticUrl: "https://bbbug.hamm.cn/",
                    maxMessageLength: 100,
                    messageList: [],
                    isLocked: false,
                    roomInfo: false,
                    userInfo: false,
                    baseData: {
                        access_token: "",
                        plat: "vscode",
                        version: 10000
                    },
                }
            },
            created() {
                let that = this;
                axios.defaults.timeout = 10000;
                window.addEventListener('message', function (event) {
                    switch (event.data.evt) {
                        case 'play':
                            break;
                        case 'getMessageList':
                            that.getMessageList();
                            break;
                        case 'newMessage':
                            break;
                        case 'reload':
                            that.baseData.access_token = event.data.data.access_token;
                            that.roomInfo = event.data.data.roomInfo;
                            that.userInfo = event.data.data.userInfo;
                            that.getMessageList();
                            break;
                        default:
                    }
                });

                vscode.postMessage({
                    evt: "init",
                });
            },
            methods: {
                urldecode(str){
                    try{
                        return decodeURIComponent(str);
                    }catch(e){
                        return str;
                    }
                },
                http2https(str) {
                    return str.toString().replace("http://", "https://");
                },
                friendlyTime: function (time) {
                    var now = parseInt(Date.parse(new Date()) / 1000);
                    var todayDate = new Date();
                    var todayTimeStamp = parseInt(Date.parse(new Date(todayDate.getFullYear() + "/" + (todayDate.getMonth() + 1) + '/' + todayDate.getDate() + " 00:00:00")) / 1000);
                    var date = new Date(time * 1000);
                    var y = date.getFullYear(),
                        m = date.getMonth() + 1,
                        d = date.getDate(),
                        h = date.getHours(),
                        i = date.getMinutes(),
                        s = date.getSeconds();
                    if (m < 10) { m = '0' + m; }
                    if (d < 10) { d = '0' + d; }
                    if (h < 10) { h = '0' + h; }
                    if (i < 10) { i = '0' + i; }
                    if (time > todayTimeStamp) {
                        return h + ":" + i;
                    } else if (now - time < 86400 * 365) {
                        return m + "-" + d + " " + h + ":" + i;
                    } else {
                        return y + "-" + m + "-" + d;
                    }
                },
                getStaticUrl(url) {
                    if (!url) {
                        url = "";
                    }
                    url = this.http2https(url.toString());
                    if (url.indexOf('http://') == 0 || url.indexOf("https://") == 0) {
                        return url;
                    } else {
                        if (url.indexOf("new/images") > -1 || url.indexOf("new/mp3") > -1 || url.indexOf("music/") > -1) {
                            return this.staticUrl + url;
                        } else {
                            return this.staticUrl + "uploads/" + url;
                        }
                    }
                },
                getMessageList() {
                    let that = this;
                    that.request({
                        url: "message/getMessageList",
                        data: {
                            room_id: that.roomInfo.room_id,
                            per_page: 20,
                        },
                        success(res) {
                            that.messageList = [];
                            for (let i = 0; i < res.data.length; i++) {
                                let _obj = false;
                                try {
                                    _obj = JSON.parse(res.data[i].message_content);
                                } catch (error) {
                                    continue;
                                }
                                if (_obj) {
                                    if (_obj.at) {
                                        _obj.content = '@' + _obj.at.user_name + " " + _obj.content;
                                    }
                                    _obj.time = res.data[i].message_createtime;
                                    _obj.isAtAll = false;
                                    if (_obj.type == 'text') {
                                        try {
                                            _obj.content = decodeURIComponent(decodeURIComponent(_obj.content));
                                        } catch (e) {
                                            _obj.content = decodeURIComponent(_obj.content);
                                        }
                                        _obj.isAtAll = _obj.content.indexOf('@全体') == 0 && (_obj.user.user_id == that.roomInfo.room_user || _obj.user.user_admin) ? true : false;
                                    }
                                    that.messageList.unshift(_obj);
                                }
                            }
                            that.autoScroll();
                        }
                    });
                },
                autoScroll() {
                    let that = this;
                    if (!that.isLocked) {
                        that.$nextTick(function () {
                            if (that.isEnableScroll) {
                                let ele = document.getElementById('bbbug_main_chat_history');
                                ele.scrollTop = ele.scrollHeight;
                            }
                        });
                    }
                },
                request(_data) {
                    let that = this;
                    axios.post(that.apiUrl + "api/" + (_data.url || ""), Object.assign({}, that.baseData, _data.data || {}), {
                        headers: {
                            'Content-Type': 'application/json'
                        }
                    })
                        .then(function (response) {
                            switch (response.data.code) {
                                case 200:
                                    if (_data.success) {
                                        _data.success(response.data);
                                    } else {
                                        that.$message.success(response.data.msg);
                                    }
                                    break;
                                case 401:
                                    if (_data.login) {
                                        that.$message.error(response.data.msg);
                                        _data.login();
                                    } else {
                                        that.$confirm(response.data.msg, '无权访问', {
                                            confirmButtonText: '登录',
                                            cancelButtonText: '取消',
                                            closeOnClickModal: false,
                                            closeOnPressEscape: false,
                                            type: 'warning'
                                        }).then(function () {
                                        }).catch(function () {
                                            if (that.global.baseData.access_token != that.global.guestUserInfo.access_token) {
                                                that.request(_data);
                                            }
                                        });
                                    }
                                    break;
                                default:
                                    if (_data.error) {
                                        that.$message.error(response.data.msg);
                                        _data.error(response.data);
                                    } else {
                                        that.$message.error(response.data.msg);
                                    }
                            }
                        })
                        .catch(function (error) {
                            console.log(error)
                        });
                }
            }
        });
    </script>
</body>

</html>